<template>
	<view class="u-page">
		<!-- <u-skeleton :loading="true" :animate="true"></u-skeleton> -->
		<view class="header_fix">
			<view class="home_header flex flex-align">
				<view class="btnGreen" @click="jianDay()">前一天</view>
				<view class="btnGreen" @click="getTimes()">{{getTime(timeInfo)}}</view>
				<view class="btnGreen" @click="jiaDay()">后一天</view>
				<view class="btnGreen" @click="openRight">筛选</view>
			</view>
		</view>
		<view class="" style="height: 90rpx;"></view>
		<view class="bgWite flex flex-align">
			<view class="flex-1">
				<text>{{dataInfo.sum||0}}</text>
				<view class="">可用红包余额</view>
			</view>
			<view class="flex-1">
				<text>{{dataInfo.amount_sum||0}}</text>
				<view class="">发放红包总额</view>
			</view>
			
		</view>
		<view class="jiluList">
			<view class="list" v-for="(item,index) in dataList" :key="index">
				<view class="wenzi flex flex-align flex-bt">
					<view>订单号:</view><view>{{item.out_batch_no}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>创建时间:</view><view>{{item.created_at}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>描述:</view><view>{{item.remark}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>发放用户:</view><view>{{item.nickname}}</view>
				</view>
				<view class="wenzi flex flex-align flex-bt">
					<view>发放金额:</view><view>{{item.sign_red}}</view>
				</view>
				
			</view>
			<view class="" v-if="dataList.length==0">
				<u-empty textColor="#999" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
			</view>
		</view>
		<u-popup :show="show" mode="right"  @close="close">
			<view style="min-width:350rpx;padding: 30rpx;padding-bottom: 200rpx;position: relative;" class="popupinfo">
				<scroll-view scroll-y="true" class="scroll-Y" style="height: 90vh;">
					<view class="title">选择商户信息</view>
					<view class="shanghu_list">
						<view class="flex flex-align flex-bt" v-for="(item,index) in shanghuInfo" :key="index" @click="selectShang(item)">
							<view class="left">{{item.name}}</view>
							<view class="right"><radio color="#0cb06b" style="transform: scale(.7);" :checked="selectSh==item.identification"></radio></view>
						</view>
					</view>
					<view class="title" style="margin-top: 20rpx;">选择支付方式</view>
					<view class="shanghu_list">
						<view class="flex flex-align flex-bt" v-for="(item,index) in zhifuInfo" :key="index" @click="selectZhi(item)">
							<view class="left">{{item.name}}</view>
							<view class="right"><radio color="#0cb06b" style="transform: scale(.7);" :checked="selectZh==item.payment_type"></radio></view>
						</view>
					</view>
				</scroll-view>
				<view class="popup_btn flex flex-align">
					<view class="flex-1" @click="clearInfo">清除</view>
					<view class="flex-1" @click="submite">确定</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker @confirm="confirm" @cancel="cancel" @close="close" :show="datashow"  v-model="time" mode="date" ></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				payment_type:'',
				identification:'',
				time: new Date(),
				dataList:[],
				timeInfo:'',
				show:false,
				shanghuInfo:[],
				zhifuInfo:[],
				selectSh:'',
				selectZh:'',
				dataInfo:'',
				datashow:false
			}
		},
		onLoad() {
			const today = new Date();
			const year = today.getFullYear();
			const month = String(today.getMonth() + 1).padStart(2, '0');
			const day = String(today.getDate()).padStart(2, '0');
			this.timeInfo = today
			this.time = year + '-' + month + '-' + day
			this.getData()
			this.getShanghu()
			this.getZhifu()
		},
		onReachBottom() {
			this.page++
			this.getData()
		},
		methods: {
			close() {
				this.show = false
				this.datashow =false
				// console.log('close');
			},
			cancel() {
				this.datashow = false
			},
			confirm(e) {
				let that = this
				let datatime=''
				const timeFormat = uni.$u.timeFormat
				datatime =timeFormat(e.value, 'yyyy-mm-dd')
				that.time = datatime
				that.datashow = false
				that.page=1
				that.dataList = []
				that.getData()
				that.timeInfo =e.value
				// this.result(e.value, e.mode)
			},
			getTime(e){
				const timeFormat = uni.$u.timeFormat
				return timeFormat(e, 'yyyy-mm-dd')
			},
			openRight(){
				this.show = true
			},
			clearInfo(){
				this.show = false
				this.selectSh = ''
				this.selectZh = ''
				this.time = ''
			},
			submite(){
				this.show = false
				this.page=1
				this.dataList = []
				this.getData()
			},
			jianDay(){
				var date = new Date(this.time); 
				var timestamp = date.getTime()
				const dates = new Date(timestamp - 24*60*60*1000);
				const year = dates.getFullYear();
				const month = String(dates.getMonth() + 1).padStart(2, '0');
				const day = String(dates.getDate()).padStart(2, '0');
				const formattedDate = `${year}-${month}-${day}`;
				this.time = formattedDate
				this.timeInfo = new Date(this.time).getTime();
				this.page=1
				this.dataList = []
				this.getData()
			},
			jiaDay(){
				var date = new Date(this.time);
				var timestamp = date.getTime()
				const dates = new Date(timestamp + 24*60*60*1000);
				const year = dates.getFullYear();
				const month = String(dates.getMonth() + 1).padStart(2, '0');
				const day = String(dates.getDate()).padStart(2, '0');
				const formattedDate = `${year}-${month}-${day}`;
				this.time = formattedDate
				this.timeInfo = new Date(this.time).getTime();
				this.page=1
				this.dataList = []
				this.getData()
			},
			getTimes(){
				this.datashow = true
			},
			selectShang(e){
				console.log(e)
				this.selectSh = e.identification
			},
			selectZhi(e){
				this.selectZh = e.payment_type
			},
			getData(){
				let that = this
				that.tui.request("auth.info/redLog", "POST", {page:that.page,payment_type:that.selectZh,identification:that.selectSh,time:that.time}, false, false, false).then((res) => {
					if(res.code==1){
						that.dataList = that.dataList.concat(res.data.list)
						that.dataInfo = res.data
					}
				}).catch((res) => {
					
				})
			},
			getShanghu(){
				let that = this
				that.tui.request("auth.info/item", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.shanghuInfo = res.data.list
					}
				}).catch((res) => {
					
				})
			},
			getZhifu(){
				let that = this
				that.tui.request("auth.info/collection", "POST", {}, false, false, true).then((res) => {
					if(res.code==1){
						that.zhifuInfo = res.data.list
					}
				}).catch((res) => {
					
				})
			},
		}
	}
</script>

<style lang="scss">
	page{background: #f2f2f2;padding-bottom: 20rpx;}
	.header_fix{position: fixed;top: 0;left: 0;width: 100%;
	/* #ifdef H5 */
	top: 80rpx;
	/* #endif */}
	 .home_header{background:#0cb06b;height: 100rpx;padding: 0 20rpx;
		.btnGreen{background: #FFF;color: #0cb06b;padding:14rpx 0rpx;margin-right: 20rpx;border-radius: 8rpx;font-weight: bold;font-size: 26rpx;min-width: 164rpx;text-align: center;}
	 }
	 .bgWite{padding: 25rpx 30rpx;font-weight: bold;font-size: 26rpx;line-height: 1.6;
		.flex-1{background: #fff;text-align: center;padding: 30rpx 0;margin-right: 20rpx;border-radius: 6rpx;
			text{color: #fb6c72;margin: 0 10rpx;font-size:32rpx}
		}
		.flex-1:last-child{margin-right: 0;}
	 }
	 .popupinfo{
		 .title{font-weight: bold;font-size: 32rpx;margin-bottom: 20rpx;}
		 .shanghu_list{
			 .flex{margin-bottom: 10rpx;
				.left{font-size: 28rpx;}
			 }
		 }
	 }
	 .popup_btn{position: absolute;bottom: 100rpx;left: 0;width: 100%;
		.flex-1{background: #0cb06b;color: #fff;text-align: center;border-radius: 8rpx;margin: 0 10rpx;font-size: 30rpx;padding: 15rpx 0;}
	 }
	 .jiluList{
		 .list{background: #fff;margin:10rpx 20rpx 20rpx;border-radius: 10rpx;padding: 30rpx;line-height: 1.7;}
	 }
	.font30{font-size: 30px;}
</style>